<template>
	<div class="container">
		<div class="header">
			<router-link to="/home">
				<i class="iconfont icon-back"></i>
			</router-link>
			<span class="header-title">我的订单</span>
		</div>
		<div class="nav">
			<ul class="nav-list">
				<li :class="{ active: status === 0 }" @click="status = 0">全部
					<span v-show="status === 0" class="tips">{{orderList.length}}</span>
				</li>
				<li :class="{ active: status === 1 }" @click="status = 1">待付款
					<span v-show="status === 1" class="tips">{{notPay}}</span>
				</li>
				<li :class="{ active: status === 2 }" @click="status = 2">已付款
					<span v-show="status === 2" class="tips">{{okPay}}</span>
				</li>
			</ul>
			<!--内容-->
			<div class="content">
				<!--没商品-->
				<ul v-if="orderList.length === 0">
					<li class="no-orders">
						<p>目前没有待收货订单...</p>
					</li>
				</ul>
				<!--有商品-->
				<ul v-else>
					<li class="in-orders in-orders-cont" v-for="item in orderList" :key="item.id">
						<div class="title-orders">
							<img src="" alt="" style="width: 25px; margin-right: 7px;" />
							<p style="font-weight: 600; flex-grow: 1">有品精选</p>
							<span style="color: rgb(191, 17, 17); font-size: 14px; text-align: right;">
                                                {{ item.pay===0 ? "待付款" : "待收货" }}
                                                         </span>
						</div>
						<div
							class="in-detail" v-for="details in item.details" :key="details.id">
							<img :src="details.avatar" alt="" style="width: 90px; height: 90px"/>
							<p class="details-name" v-text="details.name"></p>
							<div class="details-price">
								<span>￥{{ details.price }}</span>
								<span>x{{ details.count }}</span>
							</div>
						</div>
						<div>
							<p class="total">
								共{{item.details.reduce((count, item) => (count += item.count),0)}}件商品,
								总金额￥{{ item.account}}
								<span>.00</span>
							</p>
							<div class="pay">
								<span @click="remove(item.orderId)">删除</span>
								<button @click="pay(item.orderId)" class="pay-btn"  v-show="item.pay === 0 ">去支付</button>
								<button class="pay-btn"  v-show="item.pay !== 0 ">查看详情</button>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
        import { OrderApi } from "../../api";

        export default {
                name: "Order",
                data() {
                        return {
                                status: 0,
                                orderList: [],
                        };
                },
                watch: {
                        status: {
                                async handler(newValue) {
                                        switch (newValue) {
	                                        case 0:
                                                        this.orderList = await OrderApi.getAll();
                                                        console.log( this.orderList )
                                                        break;
                                                case 1:
                                                        this.orderList = await OrderApi.getUnpay();
                                                        break;
                                                case 2:
                                                        this.orderList = await OrderApi.getPay();
                                                        break;
                                        }
                                },
                                immediate: true,
	                        deep:true,
                        },
                },
                methods: {
                        async remove(id){
                                try{
                                        await this.$miConfirm("确定要删除吗?");
                                        await OrderApi.remove(id)
                                        this.orderList.splice(
                                                this.orderList.findIndex((item) => item.orderId === id),1
                                        );
                                        this.$miNotice("删除成功");
                                }catch(e){/**/
                                }
                        },
	                async pay(cid){
                                this.$router.push({
                                        path:`/pay/${cid}`,
                                })
//                                console.log(id)
//				await OrderApi.pay(id)
	                }

                        },
	        computed:{
                        notPay () {
                                return this.orderList.reduce((resust,item) => {
                                        if (!item.pay) {
                                                return resust += 1
                                        }
                                },0)
                        },
                        okPay () {
                                return this.orderList.reduce((resust,item) => {
                                        if (item.pay) {
                                                return resust += 1
                                        }
                                },0)
                        },
	        }
        };
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: rgb(244, 244, 244);
	}

	.header {
		display: flex;
		flex-basis: auto;
		flex-grow: 0;
		height: 12vw;
		align-items: center;
	}

	.icon-back {
		font-size: 21px;
		font-weight: 600;
		flex-grow: 0;
		padding: 10px;
	}

	.header-title {
		justify-content: center;
		font-size: 19px;
		margin-left: 119px;
	}

	.icon-search {
		font-size: 16px;
		font-weight: 600;
		flex-grow: 0;
		margin-right: 7px;
		padding: 10px;
	}

	.nav {
		display: flex;
		flex-grow: 1;
		flex-basis: auto;
		flex-direction: column;
	}

	ul.nav-list {
		flex-direction: row;
		height: 40px;
		width: 375px;
		display: flex;
		flex-grow: 0;
		justify-content: space-evenly;
		align-items: center;
		text-align: center;
	}

	ul.nav-list li {
		color: rgb(102, 102, 102);
		font-size: 13px;
		align-items: center;
		justify-content: center;
		width: 20vw;
		box-sizing: border-box;
		text-align: center;
	}

	ul.nav-list li.active {
		align-items: center;
		background: linear-gradient(to right, rgb(240, 32, 23), rgb(221, 80, 9));
		border-radius: 11px;
		justify-content: center;
		position: relative;
		margin-right: 10px;
		margin-left: 10px;
		width: 12vw;
		line-height: 6vw;
		color: rgb(255, 255, 255);
		font-size: 13px;
	}

	ul.nav-list li span.tips {
		position: absolute;
		background-color: rgb(227, 13, 13);
		border-color: rgb(255, 255, 255);
		border-radius: 8px;
		line-height: 16px;
		right: -6px;
		top: -3px;
		width: 14px;
		align-items: center;
		box-sizing: border-box;
	}

	.content {
		display: flex;
		flex-grow: 1;
		flex-direction: column;
	}

	/*没商品*/
	.no-orders {
		padding: 40px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.no-orders p {
		color: rgb(102, 102, 102);
		font-size: 12px;
		padding-top: 13px;
	}

	/*有商品的css设置*/
	.in-orders {
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		margin: 0px 10px 10px;
		background-color: rgb(255, 255, 255);
	}

	.in-orders-cont {
		padding-right: 10px;
		padding-left: 10px;
	}

	.title-orders {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		line-height: 44px;
	}

	.in-detail {
		display: flex;
		flex-direction: row;
	}

	.details-name {
		flex-grow: 1;
		align-self: stretch;
		margin-top: 5vw;
	}

	.details-price {
		flex-shrink: 0;
		font-size: 13px;
		display: flex;
		flex-direction: column;
		text-align: right;
		color: #666;
	}

	.total {
		text-align: right;
		font-size: 14px;
		padding: 5px 0;
		color: #666;
	}

	.total span {
		font-size: 12px;
	}

	.pay {
		display: flex;
		justify-content: space-between;
		padding: 2vw 0;
	}

	.pay-btn {
		padding: 5px 10px;
		border: 0;
		background-color: red;
		color: #fff;
		font-size: 16px;
		border-radius: 20px;
	}
</style>